import React from 'react';
import {createStackNavigator} from '@react-navigation/stack';
import {Button} from 'react-native';

const Stack = createStackNavigator();

const withTopNavigation = (WrappedComponent, screenOptions = {}) => {
  const NavigationComponent = ({navigation}) => {
    return (
      <Stack.Navigator
        screenOptions={{
          headerStyle: {
            backgroundColor: '#f4511e',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: 'bold',
          },
          ...screenOptions,
        }}>
        <Stack.Screen
          name={WrappedComponent.name}
          component={WrappedComponent}
          options={{
            headerRight: () => (
              <Button
                onPress={() => navigation.goBack()}
                title="Go to Another"
                color="#fff"
              />
            ),
          }}
        />
      </Stack.Navigator>
    );
  };

  return NavigationComponent;
};

export default withTopNavigation;
